import React from 'react';
import styles from './index.less';

const Tabs: React.FC<any> = ({ value, tabs, onChange }) => {

  return (
    <div className={styles.wrapper}>
      <div className={styles.tabsNavList}>
        {tabs.map((item: string, index: number) => {
          return (
            <span
              className={value === index ? styles.active : ''}
              key={item}
              onClick={() => onChange(index)}
            >
              {item}
            </span>
          );
        })}
      </div>
      <div style={{ left: 11 + 54 * value }} className={styles.tabsInkBar}></div>
    </div>
  );
};

export default Tabs;
